{% extends "head.html" %}yingq
{% block content %}
<div class="row" style="padding-top: 10px;padding-bottom: 10px;">
                <div class="col-sm-3 col-12" style="padding-bottom: 10px;">
                    <div style="background-color: ivory;padding-top: 10px;">
						<div class="circle" style="background-color: #FC625D;"></div>
						<div class="circle" style="background-color: #FDBC40;"></div>
                        <div class="circle" style="background-color: #35CD4B;"></div>
                        <br>
                        <br>
                        <!--个人资料区-->
						<div class="subtitle" style="padding-top: 10px;padding-bottom: 10px;padding-left: 16px;">
                            <img src="../static/image/head/{{data['user'].head_pic}}" style="height: 56px;width: 56px;border-radius: 50%;">
                            <p>&nbsp;&nbsp;account: {{data["user"].account}}</p>
<!--                            <p>&nbsp;&nbsp;账号: {{data["user"].account}}</p>-->
                            <p>&nbsp;&nbsp;nickname: {{data["user"].nickname}}</p>
<!--                            <p>&nbsp;&nbsp;昵称: {{data["user"].nickname}}</p>-->
                        </div>
                        <!--个人资料区-->
                        <div class="row" style="padding-top: 10px;padding-bottom: 10px;padding-left: 16px;padding-right: 16px;">
                            <div class="col-sm-4 col-4">
                                <p style="align-content: center;">{{data["follower_count"]}}</p>
                                <p style="align-content: center;">Followers</p>
<!--                                <p style="align-content: center;">关注</p>-->
                            </div>
                            <div class="col-sm-4 col-4">
                                <p style="align-content: center;">{{data["fan_count"]}}</p>
                                <p style="align-content: center;">Fans</p>
<!--                                <p style="align-content: center;">粉丝</p>-->
                            </div>
                            <div class="col-sm-4 col-4">
                                <p style="align-content: center;">{{data['content'] | length}}</p>
                                <p style="align-content: center;">Essays</p>
<!--                                <p style="align-content: center;">动态</p>-->
                            </div>
                        </div>
                    </div>
                    <br>
                    <div style="padding-left: 10px;padding-right: 10px;padding-bottom: 10px; background-color: ivory;padding-top: 10px;">
                        <div class="circle" style="background-color: #FC625D;"></div>
						<div class="circle" style="background-color: #FDBC40;"></div>
                        <div class="circle" style="background-color: #35CD4B;"></div>
                        <br>
                        <br>
                        <p style="align-content: center;">&nbsp;Follow</p>
<!--                        <p style="align-content: center;">&nbsp;关注列表</p>-->

                        {% if not data['followers'] %}
                        <div class="subtitle" style="border: solid 1px gray;padding: 5px;">
                            <div class="row" style="padding: 0px;border-color:yellow;">
                                <img src="../static/image/nodata.png" style="height: 100%;width: 100%;border-radius: 2%;">
                            </div>
                        </div>
                        {% endif %}

                        {% for follower in data['followers'] %}
                        <br>
						<div class="subtitle" style="border: solid 1px gray;padding: 5px;">
                                <a href="{{url_for('person',user_id=follower.userid)}}">
                                    <img src="../static/image/head/{{follower.head_pic}}" style="height: 56px;width: 56px;border-radius: 50%;">
                                </a>
                                <div style="padding: 15px;border-color:yellow;">
                                    <a href="{{url_for('person',user_id=follower.userid)}}">
                                        <p>{{follower.nickname}}</p>
                                    </a>
                                </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="col-sm-6 col-12" style="padding:0px;margin-bottom: 10px;">
                    {% if not data['essays']%}
                    <div class="row" style="background-color: ivory;padding: 10px;">
                        <br>
                        <div class="col-12">
                            <div class="col-12">
                                <img src="../static/image/nodata.png" style="height: 100%;width: 100%;border-radius: 2%;">
                            </div>
                        </div>
                    </div>
                    <br>
                    {% endif %}

                    {% for essay in data['essays'] %}
                    <div class="row" style="background-color: ivory;padding: 10px;">
                        <br>
                        <div class="col-12">
                            <a href="{{url_for('person',user_id=data['user'].userid)}}">
                                <img src="../static/image/head/{{data['user'].head_pic}}" style="height: 56px;width: 56px;border-radius: 50%;">
                            </a>
                            <div style="border-color:yellow;">
                                <a href="{{url_for('person',user_id=data['user'].userid)}}">
                                    <p>{{data['user'].nickname}}</p>
                                </a>
                                <p>{{ essay[0].createTime | time}}</p>
                            </div>
                            <br>
                            {% for line in data['content'][essay[0].essayid] %}
                            <p style="letter-spacing:1px width:100px">{{line | safe }}</p>
                            {% endfor %}
                            <div class="row" style="padding-top:10px">
                                <div class="col-3" style="background-color: whitesmoke;" id="sup">
                                    {% if essay[1].isDelete == False and authority != 0 and essay[1].userid == data['c_userid'] %}
                                    <a href="{{url_for('support', essay_id=essay[0].essayid, user_id=data['user'].userid, s=0)}}">
                                        <img src="../static/image/supported.png" style="height: 16px;width: 16px;margin-top: 4px">
                                    <p style="font-size:10px">&nbspSupport &nbsp&nbsp&nbsp{{essay[0].support_num}}</p></a>
<!--                                    <p style="font-size:10px">&nbsp点赞 &nbsp&nbsp&nbsp{{essay[0].support_num}}</p></a>-->
                                    {% elif authority != 0 %}
                                    <a href="{{url_for('support', essay_id=essay[0].essayid, user_id=data['user'].userid, s=1)}}">
                                        <img src="../static/image/support.png" style="height: 16px;width: 16px;margin-top: 4px">
                                    <p style="font-size:10px">&nbspSupport &nbsp&nbsp&nbsp{{essay[0].support_num}}</p></a>
<!--                                    <p style="font-size:10px">&nbsp点赞 &nbsp&nbsp&nbsp{{essay[0].support_num}}</p></a>-->
                                    {% else %}
                                    <a href="">
                                        <img src="../static/image/support.png" style="height: 16px;width: 16px;margin-top: 4px">
                                    <p style="font-size:10px">&nbspSupport &nbsp&nbsp&nbsp{{essay[0].support_num}}</p></a>
<!--                                    <p style="font-size:10px">&nbsp点赞 &nbsp&nbsp&nbsp{{essay[0].support_num}}</p></a>-->
                                    {% endif %}
                                </div>
                                <div class="col-3"></div>
                                <div class="col-3"></div>
                                {% if authority == 2 %}
                                <div class="col-3" style="background-color: whitesmoke;">
                                    <a href="{{url_for('delete',essayid=essay[0].essayid)}}">
                                        <img src="../static/image/delete.png" style="height: 16px;width: 16px;margin-top: 4px">
                                    <p style="font-size:10px">&nbspDelete</p></a>
<!--                                    <p style="font-size:10px">&nbsp删除</p></a>-->
                                </div>
                                {% endif %}
                            </div>

                        </div>
                    </div>
                    <br>
                    {% endfor %}
                </div>

                <div class="col-sm-3 col-12">
                    <div class="row" style="padding-bottom: 10px;">
                        <div class="col-12" style="background-color: ivory;padding-top: 10px;">
                            <div class="circle" style="background-color: #FC625D;"></div>
                            <div class="circle" style="background-color: #FDBC40;"></div>
                            <div class="circle" style="background-color: #35CD4B;"></div>
                            <br>
                            <p>
                                &nbsp;&nbsp;new content
                            </p>
                                <div style="padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;">
                                    <div  id="essay" contenteditable="true"
                                          style="background-color: white;border: solid 2px gainsboro;">
                                    </div>
                                </div>
                                <div class="row" style="padding-top: 10px;padding-bottom: 10px;padding-left: 16px;padding-right: 16px;">
                                    <button type="submit" id="essay-btn" style="
                                    opacity: 1;
                                    {% if authority != 2 %}
                                    cursor: not-allowed;
                                    {% endif %}
                                    width: 70px;
                                    height: 32px;
                                    outline: none;
                                    background-color: #00a1d6;
                                    font-size: 13px;
                                    line-height: 33px;
                                    color: #fff;
                                    border: none;
                                    border-radius: 4px;">submit</button>
                                </div>
                                {% if authority == 2 %}
                                <script>
                                    $("#essay-btn").click(function(){
                                        content = $.trim($("#essay").html())
                                        if(content==""){
                                            alert("Write something")
                                            //alert("写点东西吧")
                                            return
                                        }
                                        $.ajax({
                                            url:'/person/'+{{data['user'].userid}},
                                            type:'post',
                                            data:{content:content},
                                            success: function(data){
                                                if (data['code']==0){
                                                    window.location.reload()
                                                }
                                            }
                                        });
                                    })
                                </script>
                                {% endif %}
                        </div>
                    </div>
                    <div>
                        <div class="col-12" style="background-color: ivory;padding-top: 10px;padding-bottom: 10px;">
<!--                        认识一下-->
                            Make Friends
                            <div style="padding-top: 10px;">
                                <div class="subtitle" style="border: solid 1px gray;padding: 5px;">
                                    <a href="{{url_for('person',user_id=admin.userid)}}">
                                        <img src="../static/image/head/{{admin.head_pic}}" style="height: 56px;width: 56px;border-radius: 50%;">
                                    </a>
                                    <div style="padding: 5px;border-color:yellow;">
                                        <a href="{{url_for('person',user_id=admin.userid)}}">
                                            <p>&nbsp;&nbsp;{{admin.nickname}}</p>
                                            <p>&nbsp;&nbsp;Information</p>
<!--                                            <p>&nbsp;&nbsp;更新信息发布</p>-->
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {% for recommend in recommends %}
                            <div style="padding-top: 10px;">
                                <div class="subtitle" style="border: solid 1px gray;padding: 5px;">
                                    <a href="{{url_for('person',user_id=recommend.userid)}}">
                                        <img src="../static/image/head/{{recommend.head_pic}}" style="height: 56px;width: 56px;border-radius: 50%;">
                                    </a>
                                    <div style="padding: 15px;border-color:yellow;">
                                        <a href="{{url_for('person',user_id=recommend.userid)}}">
                                            <p>&nbsp;&nbsp;nickname: {{recommend.nickname}}</p>
<!--                                            <p>&nbsp;&nbsp;昵称: {{recommend.nickname}}</p>-->
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

            </div>
{% endblock %}